<template>
  <div class="tabbar">
    <div v-for="(item, index) in list" :key="index" class="tabbar-block">
      <!-- //普通按钮 -->
      <div class="tabbar-item" v-if="index !== 1" @click="switchBtn(index)">
        <img :src="item.isChecked ? item.isSelectIcon : item.icon" alt="" />
        <span :style="item.isChecked ? 'color: #4578ff;' : 'color:#6D86C9'">{{
          item.name
        }}</span>
      </div>
      <!-- 中间按钮 -->
      <div class="tabbar-btn" v-if="index === 1">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import homeBlue from "../assets/image/home1.png";
import home from "../assets/image/home.png";
import mine1 from "../assets/image/mine1.png";
import mine from "../assets/image/mine.png";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      list: [
        {
          name: "首页",
          icon: home,
          isSelectIcon: homeBlue,
          isChecked: true,
          route: "Home",
        },
        {
          name: "约 单",
        },
        {
          name: "我的",
          icon: mine,
          isSelectIcon: mine1,
          isChecked: false,
          route: "About",
        },
      ],
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    switchBtn(id) {
      this.list.forEach((item, index) => {
        if (index === id) {
          if (!this.list[id].isChecked) {
            
            this.list[id].isChecked = true;

            this.$router.push({
              name: this.list[id].route,
            });
          }
        } else {
          this.list[index].isChecked = false;
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.tabbar {
  // margin-top: 2px;
  height: 82px;
  box-sizing: border-box;
  display: flex;
  z-index: 999;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 1px -2px 20px 0px rgba(69, 120, 255, 0.2);
  border-radius: 16px 16px 0px 0px;
}
.tabbar-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-bottom: 3px;
    width: 24px;
    height: 24px;
  }
  span {
    font-size: 11px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
  }
}
.tabbar-btn {
  width: 72px;
  height: 38px;
  background-color: #4578ff;
  border-radius: 23px;
  font-size: 11px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  line-height: 38px;
  color: #ffffff;
}
</style>
